<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>自定义指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				需求：自定义一个v-very-big指令，功能和v-text类似，但是能把值放大10倍后呈现。
				自定义指令总结：
				一、定义语法：
							(1).局部指令：
										new Vue({
											...
											directives{指令名:回调函数}
											...
										})
							(2).全局指令：
										Vue.directive(指令名,回调函数)

				二、备注：
							1.指令定义时不加v-，但使用时必须要加v-。
							2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
							3.执行回调中的this不是vm。
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>
				当前sum的值是：<span v-text="sum"></span> <br><br>
				当前sum的值放大10倍后是：<span v-very-big="sum"></span>
				<h4 v-very-beauty="sum"></h4>
			</h2>
			<button @click="sum += 1">点我sum+1</button>
		</div>

		<div id="demo2">
			<h4 v-very-beauty="name"></h4>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			//定义一个全局的指令（vm 以及所有的组件，都能用）
			Vue.directive('very-beauty',function(element,{value}){
				element.innerText = value
				element.style.color = 'red'
				element.style.backgroundColor = 'yellow'
				element.style.border = '3px solid green'
			})

			new Vue({
				el:'#demo',
				data:{
					sum:1
				},
				//局部指令（只有当前的vm  或  当前的组件能用）
				directives:{
					//very-big函数何时会被调用？—— v-big指令被使用的时候
					'very-big'(element,{value}){
						// console.log('@',this) //此处的this不是vm
						//如果指令的值是数值类型
						if(typeof(value) === 'number'){
							element.innerText = value*10
							if(value >= 5){
								element.style.color = 'red'
								element.style.backgroundColor = 'skyblue'
							}
						}
						//如果指令的值不是数值类型
						else{
							throw('指令使用错误，请指定数值类型')
						}
					}
				}
			})
			
			new Vue({
				el:'#demo2',
				data:{
					name:'张三'
				}
			})
		</script>
	</body>
</html>